<template>
  <div class="product-manage" >
    <!--    <el-button type="primary" @click="showAddDialog">添加商品</el-button>-->
    <el-table  highlight-current-row :data="orders"  style="width: 100%">
      <el-table-column prop="order_number" label="订单编号" width="250" ></el-table-column>
      <el-table-column  label="商品图片">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cimage"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="cname" label="商品名称"></el-table-column>
      <el-table-column prop="ucnumber" label="商品数量"></el-table-column>
      <el-table-column prop="price" label="商品价格（元/kg）" width="150"></el-table-column>
      <el-table-column prop="username" label="订单所属所属者"></el-table-column>
      <el-table-column prop="state" label="订单状态" >
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.state)">{{getOrderState(scope.row.state)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="150" label="操作">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search_key"
              @keyup.enter.native="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">

          <el-button size="small"  type="danger" @click="deleteProduct(scope.row,scope.$index,orders)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

export default {
  data() {
    return {
      search_key:'',
      orders: [],
      categories: [],
      categories2: [],
      addDialogVisible: false,
      addForm: {
        cname: '',
        category: '',
        price: ''
      },
      addRules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }]
      },
      editDialogVisible: false,
      editForm: {
        cid: '',
        cname: '',
        category: '',
        category2: '',
        price: ''
      },

      editRules: {
        cname: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getOrders()
    // this.getCategories()
    // this.getCategories2()

  },
  methods: {
    search(){
      if (this.search_key===''){
        this.getOrders()

      }else {
        axios.get('http://localhost:8088/order_b/searchOrderByKey',{params:{
            key:this.search_key
          }})
            .then(response => {
              this.orders=response.data.data
            })
            .catch(error => {
              console.log(error)
            })
      }
    },

    getTagType(value) {
      if (value === "y") {
        return 'success';
      } else if (value === "n") {
        return 'warning';
      } else {
        return '';
      }
    },
    getOrderState(value) {
      if (value === "y") {
        return '订单完成';
      } else if (value === "n") {
        return '未完成';
      } else {
        return '';
      }
    },
    getOrders() {
      axios.get('http://localhost:8088/order_b/findAllOrder')
          .then(response => {
            console.log(response.data.data)
            this.orders = response.data.data
            // this.categories=response.data.categories
          })
          .catch(error => {
            console.log(error)
          })
    },
    getCategories() {
      axios.get('http://localhost:8088/commodity_b/findAllCategories')
          .then(response => {
            this.categories = response.data.data
          })
          .catch(error => {
            console.log(error)
          })
    },
    showAddDialog() {
      this.addDialogVisible = true
    },
    add() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          axios.post('/products', this.addForm)
              .then(() => {
                this.addDialogVisible = false
                this.getProducts()
                Message.success('添加商品成功')
              })
              .catch(error => {
                console.log(error)
              })
        } else {
          return false
        }
      })
    },
    deleteProduct(order,index,rows) {
      MessageBox.confirm('此操作将永久删除该顶单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            axios.delete('http://localhost:8088/order_b/delOrderByOID',{params:{
                oid:order.oid
              }})
                .then(() => {
                  // this.getProducts()
                  rows.splice(index,1);
                  Message.success('删除订单成功')
                })
                .catch(error => {
                  console.log(error)
                })
          })
          .catch(() => {
            // do nothing
          })
    }
  }
}
</script>

<style scoped> .product-manage { padding: 20px; } </style>
